import React, { Component } from 'react';

import { Form, Input, Button, Row, Col, message } from 'antd';
import { connect } from 'dva';
import GetYCodeFormItem from '../../components/GetYCodeFormItem';
import { email as emailReg } from '@/utils/regexp';
const FormItem = Form.Item;

@Form.create()
@connect(({ loading }) => ({
  loading: loading.effects['editEmail/setResetEmail'],
}))
class BindNewMail extends Component {
  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, changeCurrent,oldCode,oldEmail } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(values.email === oldEmail){
          return message.error('新邮箱不能与原邮箱相同！');
        }
        const newData = {};
        newData.newCode = values.code;
        newData.oldCode = oldCode;
        newData.newEmail = values.email;
        newData.oldEmail = oldEmail;
        dispatch({
          type: 'editEmail/setResetEmail',
          payload: newData,
        })
          .then(msg => {
            changeCurrent(2);
          })
          .catch(errMsg => {
            message.error(errMsg);
          });
      }
    });
  };
  render() {
    const {
      form: { getFieldDecorator },
      form,
      loading,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <Row>
          <Col span={8}>
              <FormItem label="邮箱" {...formItemLayout}>
                {getFieldDecorator('email', {
                  //initialValue: information&&information.email,
                  rules: [
                    {
                      required: true,
                      message: "请输入邮箱地址!"
                    },
                    {
                      message: "请输入正确的邮箱地址!",
                      pattern: emailReg
                    }
                  ],
                })(<Input placeholder="邮箱地址" />)}
              </FormItem>
          </Col>
        </Row>
        <GetYCodeFormItem
          disabled={loading}
          id="code"
          validField="email"
          type="email"
          serviceType={5}
          form={form}
          formItemLayout={formItemLayout}
        />
        <Row>
          <Col span={8} offset={2}>
            <Button type="primary" htmlType="submit" disabled={loading}>
              {loading ? '请稍后' : '下一步'}
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}
export default BindNewMail;
